<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>006_dom其他样式的相关属性</title>
    <style type="text/css">
        #box1 {
            width: 200px;
            height: 200px;
            background-color: yellowgreen;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <button id="btn">点我一下</button>
<script type="text/javascript">
    var btn = document.getElementById("btn");
    var box1 = document.getElementById("box1");
    btn.onclick = function () {
        /**
         * 这两个属性可以获取元素的可见宽度和高度，这些属性都是不带px的，可以直接进行计算
         * 会获取元素的宽度和高度，这些宽高包括内容区和内边距
         * 这些属性都是只读的，不能够修改
         */
        // alert(box1.clientWidth + "---"+box1.clientHeight);

        // 可以获取元素的整个的宽高：内容区+内边距+边框
        // alert(box1.offsetWidth + "---" + box1.offsetHeight);


        // offsetParent 会获取到当前元素最近的开启了定位的祖先元素，如果所有的祖先元素都没有开启定位，则返回body
        // alert(box1.offsetParent);

        /**
         * offsetLeft:当前元素相对于其定位父元素的水平偏移量
         * offsetTop：当前元素相对于其定位父元素的垂直偏移量
         */
        // alert(box1.offsetTop + "---" + box1.offsetLeft);


        // scrollWidth scrollHeight  可以获取元素滚动区的高度和宽度
        // alert(box1.scrollWidth + "--" + box1.scrollHeight);

        // scrollLeft scrollTop 可以获取水平滚动条滚动的距离，可以获取垂直滚动条滚动的距离
        alert(box1.scrollLeft + "---" + box1.scrollTop);


    }
</script>
</body>
</html>